<script lang="ts" setup>
import { useDict } from './utils'
import type { SysDictionaryDataType, SysDictionaryType } from './utils/model'
import { useDictData } from './utils/dictData'
import SpDict from '@/components/SpDict/index.vue'
import { transformI18n } from '@/plugins/i18n'

const {
  openModal,
  deleteData,
  search,
  clear,
  batchDeleteChange,
  onSelectChange,
  paginationChange,
  dataList,
  columns,
  queryParams,
  loading,
  selectedRowKeys
} = useDict()

const {
  open,
  dictDataLogList,
  dictDataLogLoading,
  dictDataLogColumn,
  afterOpenChange,
  openDictDataModal,
  showDrawer,
  dictDataDelete
} = useDictData()
</script>

<template>
  <div class="dict">
    <a-card style="margin-bottom: 15px">
      <a-form label-align="left">
        <a-row :gutter="24" style="height: 32px">
          <a-col :span="6">
            <a-form-item label="名称/类型/备注" style="margin-bottom: 0">
              <a-input v-model:value="queryParams.value" placeholder="请输入搜索内容" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <SpDict
              v-model="queryParams.status"
              dictType="sys_dict_status"
              label="状态"
              name="status"
              placeholder="请选择字典状态"
              type="select"
            />
          </a-col>
          <a-col :span="6">
            <a-button style="margin-right: 15px" type="primary" @click="search">{{
              transformI18n('table.query.search')
            }}</a-button>
            <a-button @click="clear">{{ transformI18n('table.query.clear') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <SpTable
        :column-list="columns"
        :data="dataList"
        :loading="loading"
        :paging="queryParams"
        :row-key="(record) => record.id"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        :scroll="{ x: 0 }"
        add-button
        delete-button
        derive-button
        print-button
        @add-change="openModal('新增')"
        @pagination-change="paginationChange"
        @batch-delete-change="batchDeleteChange"
      >
        <template #code="{ record }: { record: SysDictionaryType }">
          <a href="javascript:void(0)" @click="showDrawer(record.code)">
            {{ record.code }}
          </a>
        </template>
        <template #operation="{ record }: { record: SysDictionaryType }">
          <a-button size="small" type="link" @click="openModal('编辑', record)">{{
            transformI18n('btn.edit')
          }}</a-button>
          <a-popconfirm
            cancel-text="取消"
            ok-text="确定"
            placement="left"
            title="您确认删除这条数据吗？"
            @confirm="deleteData(record)"
          >
            <a-button danger size="small" type="link">{{ transformI18n('btn.delete') }}</a-button>
          </a-popconfirm>
        </template>
      </SpTable>
    </a-card>
    <!-- 调度日志   -->
    <a-drawer
      v-model:open="open"
      placement="right"
      title="字典数据列表"
      width="60%"
      @after-open-change="afterOpenChange"
    >
      <SpTable
        :column-list="dictDataLogColumn"
        :data="dictDataLogList"
        :loading="dictDataLogLoading"
        add-button
        @add-change="openDictDataModal('新增')"
      >
        <template #operation="{ record }: { record: SysDictionaryDataType }">
          <a-button size="small" type="link" @click="openDictDataModal('编辑', record)">{{
            transformI18n('btn.edit')
          }}</a-button>
          <a-popconfirm
            cancel-text="取消"
            ok-text="确定"
            placement="left"
            title="您确认删除这条数据吗？"
            @confirm="dictDataDelete(record.id as number)"
          >
            <a-button danger size="small" type="link">{{ transformI18n('btn.delete') }}</a-button>
          </a-popconfirm>
        </template>
      </SpTable>
    </a-drawer>
  </div>
</template>

<style scoped></style>
